<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-if指令</title>
</head>

<body>
    <div id="app">
        <input type="button" @click="show" value="点击隐藏或显示"/>
        <!-- 
            v-show指令 
            1.语法：v-show="真假表达式" 根据表达式的真假显示或者隐藏内容
            2.设置display完成隐藏和显示 
            3.若切换隐藏和显示情况较多，则v-show更适合，v-show性能更好
        -->
        <img src="./image/1.jpg" v-show="isShow" />
        <!-- 
            v-if指令 
            1.语法：v-if="真假表达式" 根据表达式的真假 
            2.直接抹除标签，在DOM树种移除元素
        -->
        <input type="button" @click="add" value="年龄超过18则显示图片"/>
        <img src="./image/sun.jpg" v-if="age>18" width="200px" height="auto" />
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow:false,
                age:16
            },
            methods:{
                show(){
                    this.isShow = !this.isShow
                },
                add(){
                    this.age++
                }
            }
        })
    </script>
</body>

</html>